<template>
  <a-drawer
    width="55%"
    title="客户回款"
    :label-col="4"
    :wrapper-col="14"
    :visible="open"
    :body-style="{ height: 'calc(100vh - 100px)', overflow: 'auto' }"
    @close="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules" layout="vertical">
      <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
        <a-row
          :gutter="32"
          style="width: 65%; margin-left: 20%; margin-top: -10px"
        >
          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >基本信息</span
                >
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="客户姓名" prop="customerName">
                <a-input
                  v-model="form.customerName"
                  placeholder="请选择客户"
                  disabled
                  @search="handleOnSearchCustomer"
                >
                </a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="电话" prop="phone">
                <a-input
                  v-model="form.phone"
                  placeholder="请输入电话"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="申请额度（元）" prop="yxEdu">
                <a-input-number
                  v-model="form.yxEdu"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入申请额度（元）"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="客服" prop="servcieUserName">
                <a-input
                  v-model="form.servcieUserName"
                  placeholder="请选择客服"
                  style="width: 58%"
                  disabled
                >
                </a-input>
                <a-button
                  type="primary"
                  icon="customer-service"
                  @click="chooseUserVisible = true"
                  style="margin-left: 5px"
                >
                </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >产品信息</span
                >
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="32" v-if="form.orgType && form.isTgOne === '1'">
            <a-col :span="8">
              <a-form-model-item label="服务机构（一）" prop="orgType">
                <a-select
                  placeholder="请选择服务机构"
                  v-model="form.orgType"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  disabled
                >
                  <a-select-option
                    v-for="(d, index) in orgTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="产品名称（一）">
                <a-select
                  placeholder="请选择产品"
                  v-model="form.productId"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  @select="handleChooseProduct"
                >
                  <a-select-option
                    v-for="d in productList"
                    :key="d.productName"
                    :value="d.id"
                    >{{ d.productName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否通过" prop="isTgOne">
                <a-radio-group v-model="form.isTgOne">
                  <a-radio value="1"> 通过 </a-radio>
                  <a-radio value="2"> 未通过 </a-radio>
                </a-radio-group></a-form-model-item
              >
            </a-col>
          </a-row>
          <a-row :gutter="32" v-if="form.orgTypeTwo && form.isTgTwo === '1'">
            <a-col :span="8">
              <a-form-model-item label="服务机构（二）" prop="orgTypeTwo">
                <a-select
                  placeholder="请选择服务机构"
                  v-model="form.orgTypeTwo"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  disabled
                >
                  <a-select-option
                    v-for="(d, index) in orgTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="产品名称（二）">
                <a-select
                  placeholder="请选择产品"
                  v-model="form.productIdTwo"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  @select="handleChooseProductTwo"
                >
                  <a-select-option
                    v-for="d in productListTwo"
                    :key="d.productName"
                    :value="d.id"
                    >{{ d.productName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否通过" prop="isTgTwo">
                <a-radio-group v-model="form.isTgTwo">
                  <a-radio value="1"> 通过 </a-radio>
                  <a-radio value="2"> 未通过 </a-radio>
                </a-radio-group></a-form-model-item
              >
            </a-col>
          </a-row>
          <a-row
            :gutter="32"
            v-if="form.orgTypeThree && form.isTgThree === '1'"
          >
            <a-col :span="8">
              <a-form-model-item label="服务机构（三）" prop="orgTypeThree">
                <a-select
                  placeholder="请选择服务机构"
                  v-model="form.orgTypeThree"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  disabled
                >
                  <a-select-option
                    v-for="(d, index) in orgTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="产品名称（三）">
                <a-select
                  placeholder="请选择产品"
                  v-model="form.productIdThree"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  @select="handleChooseProductThree"
                >
                  <a-select-option
                    v-for="d in productListThree"
                    :key="d.productName"
                    :value="d.id"
                    >{{ d.productName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否通过" prop="isTgThree">
                <a-radio-group v-model="form.isTgThree">
                  <a-radio value="1"> 通过 </a-radio>
                  <a-radio value="2"> 未通过 </a-radio>
                </a-radio-group></a-form-model-item
              >
            </a-col>
          </a-row>

          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >贷款信息</span
                >
              </div>
            </a-col>
          </a-row>

          <a-row :gutter="32">
            <a-col :span="8">
              <a-form-model-item label="申请金额（元）" prop="yxEdu">
                <a-input-number
                  v-model="form.yxEdu"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入申请金额（元）"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="签约金额（元）" prop="sjEdu">
                <a-input-number
                  v-model="form.sjEdu"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入签约金额（元）"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="放款时间" prop="fkTime">
                <a-date-picker
                  v-model="form.fkTime"
                  valueFormat="YYYY-MM-DD"
                  :show-today="true"
                  style="width: 100%"
                  @change="handleOverTimeChange"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="还款方式" prop="backType">
                <a-select
                  placeholder="请选择上门门店"
                  v-model="form.backType"
                  style="width: 100%"
                  disabled
                >
                  <a-select-option
                    v-for="(d, index) in backTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="分期时间（月数）" prop="fenqiTime">
                <a-input-number
                  v-model="form.fenqiTime"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入分期时间（月数）"
                  @change="handleOverTimeChange"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="到期时间" prop="overTime">
                <a-date-picker
                  v-model="form.overTime"
                  valueFormat="YYYY-MM-DD"
                  :show-today="true"
                  style="width: 100%"
                  disabled
                />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >服务费用</span
                >
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="8">
              <a-form-model-item
                label="客户是否同意服务费用"
                prop="agreeServiceAmount"
              >
                <a-radio-group
                  default-value="0"
                  v-model="form.agreeServiceAmount"
                  disabled
                >
                  <a-radio value="0"> 同意 </a-radio>
                  <a-radio value="1"> 不同意 </a-radio>
                </a-radio-group></a-form-model-item
              >
            </a-col>
            <a-col :span="8" v-if="form.agreeServiceAmount != '1'">
              <a-form-model-item label="服务费" prop="serviceAmount">
                <a-input-number
                  v-model="form.serviceAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入服务费"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item
                label="确认回款金额"
                prop="serviceConfirmAmount"
              >
                <a-input-number
                  v-model="form.serviceConfirmAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="填写回款成本自动计算"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="费用备注" prop="serviceAmountRemark">
                <a-input
                  type="textarea"
                  v-model="form.serviceAmountRemark"
                  placeholder="请输入费用备注"
                />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >回款信息</span
                >
              </div>
            </a-col>
          </a-row>

          <a-row :gutter="32">
            <a-col :span="6">
              <a-form-model-item label="钥匙费" prop="serviceKeyAmount">
                <a-input-number
                  v-model="form.serviceKeyAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入钥匙费"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="退保费" prop="serviceInsuranceAmount">
                <a-input-number
                  v-model="form.serviceInsuranceAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入退保费"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="谈单费" prop="serviceDealAmount">
                <a-input-number
                  v-model="form.serviceDealAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入谈单费"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="客服签单费" prop="serviceSignAmount">
                <a-input-number
                  v-model="form.serviceSignAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入客服签单费"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="安装GPS费" prop="serviceGpsAmount">
                <a-input-number
                  v-model="form.serviceGpsAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入安装GPS费"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="抵押费" prop="serviceDiyaAmount">
                <a-input-number
                  v-model="form.serviceDiyaAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入抵押费"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="解压费" prop="serviceJieyaAmount">
                <a-input-number
                  v-model="form.serviceJieyaAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入解压费"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="垫资成本" prop="servicePayAmount">
                <a-input-number
                  v-model="form.servicePayAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入垫资成本"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="其他成本" prop="serviceOtherAmount">
                <a-input-number
                  v-model="form.serviceOtherAmount"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入其他成本"
                  @change="handleChangeConfirmAmount()"
                />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >其他信息</span
                >
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="24">
              <a-form-model-item label="备注" prop="remark">
                <a-input
                  type="textarea"
                  v-model="form.remark"
                  placeholder="请输入备注"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-row>
      </a-spin>
      <div class="bottom-control">
        <a-space>
          <a-button
            type="primary"
            @click="handleConfirmHuikuan('10')"
            style="background-color: orange; border-color: orange"
            :loading="loading"
          >
            确认回款
          </a-button>
          <a-button @click="cancel" type="danger"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>
<script>
import BizJinjianInfoEditForm from "./BizJinjianInfoForm";
export default {
  ...BizJinjianInfoEditForm,
};
</script>
